<template>
    <div>
        <el-form :model="form" style="width: 60%;margin: auto;" :rules="rules" ref="ruleForm" label-width="100px"
            class="demo-ruleForm">
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="移库单号" prop="RelocationCode">
                        <el-input v-model="form.RelocationCode"></el-input>
                    </el-form-item>
                    <el-form-item label="制单人" prop="Creator">
                        <el-input v-model="form.Creator"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="移库类型" align="left" prop="RelocationType">
                        <el-select v-model="form.RelocationType" placeholder="移库类型">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="移库上架" value="移库上架"></el-option>
                            <el-option label="仓库移库" value="仓库移库"></el-option>
                            <el-option label="移库报损" value="移库报损"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="制单时间" align="left" prop="CreatorTime">
                        <el-date-picker v-model="form.CreatorTime" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注" prop="Remarks">
                <el-input type="textarea" v-model="form.Remarks" maxlength="300"></el-input>
            </el-form-item>
        </el-form>

        <div align="right"> <el-button @click="Choose">选择产品</el-button></div>
        <el-table :data="Relocation" border style="width: 100%" @selection-change="handleSelection">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="productCode" label="产品编号">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称">
            </el-table-column>
            <el-table-column prop="specs" label="规格">
            </el-table-column>
            <el-table-column prop="unitName" label="单位">
            </el-table-column>
            <el-table-column prop="price" label="单价">
            </el-table-column>
            <el-table-column prop="buyNumber" label="数量">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.buyNumber" :min="1"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="oldWarehouseName" label="当前仓库">
            </el-table-column>
            <el-table-column prop="oldLocationName" label="当前库位">
            </el-table-column>
            <el-table-column prop="newWarehouseName" label="移入仓库">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.newWarehouseName" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="newLocationName" label="移入库位">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.newLocationName" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" @click="Del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div><el-button type="primary" @click="Add">添加</el-button>
            <el-button @click="reset">返回</el-button>
        </div>
        <el-dialog title="选择产品" :visible.sync="dialogTableVisible">
            <el-form :inline="true" align="left" :model="dataProduct" class="demo-form-inline">
                <el-form-item label="产品编号">
                    <el-input v-model="dataProduct.ProductCode" placeholder="产品编号"></el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="dataProduct.ProductName" placeholder="产品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="GetProductList">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="ProductList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="productCode" label="产品编号">
                </el-table-column>
                <el-table-column prop="productName" label="产品名称">
                </el-table-column>
                <el-table-column prop="specs" label="规格">
                </el-table-column>
                <el-table-column prop="categoryName" label="类别">
                </el-table-column>
                <el-table-column prop="unitName" label="存储单位">
                </el-table-column>
                <el-table-column prop="packageType" label="包装类型">
                </el-table-column>
                <el-table-column prop="price" label="单价">
                </el-table-column>
                <el-table-column prop="weight" label="重量">
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="dataProduct.pageIndex" :page-sizes="[2, 5, 10, 20]" :page-size="dataProduct.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="dataProduct.totalCount" prev-text="上一页"
                next-text="下一页">
            </el-pagination>
            <div align="right">
                <el-button type="primary" @click="off">选择</el-button>
                <el-button @click="dialogTableVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { autoGenerateCode } from "@/utils/utils";
import { AddRelocation,GetProductList } from "@/api/WarehouseServer/Relocation";
export default {
    data() {
        return {
            dialogTableVisible: false,
            Relocation: [],
            CheckList: [],
            CheckList1: [],
            ProductList: [],
            dataProduct: {
                ProductCode: "",
                ProductName: "",
                pageIndex: 1,
                pageSize: 5,
                pageCount: 0,
                totalCount: 0,
            },
            form: {
                RelocationCode: "", //编号
                RelocationType: "",
                Creator: "",
                CreatorTime: "",
                Remarks: "",
            },
            rules: {
                RelocationCode: [
                    { required: true, message: '请选择移库单号', trigger: 'blur' }
                ], //编号
                RelocationType: [
                    { required: true, message: '请选择单据类型', trigger: 'change' }
                ],
                Creator: [
                    { required: true, message: '请选择制单人', trigger: 'blur' }
                ],
                CreatorTime: [
                    { type: 'date', required: true, message: '请选择制单日期', trigger: 'change' }
                ],
                Remarks: "",
            },
        }
    },
    methods: {
        //添加
        Add() {
            var data = {
                RelocationCode: this.form.RelocationCode,
                RelocationType: this.form.RelocationType,
                Creator: this.form.Creator,
                CreatorTime: this.form.CreatorTime,
                Remarks: this.form.Remark,
                RelocationDetailDTO: this.Relocation
            };
            console.log(data);
            AddRelocation(data).then(res => {
                if (res.data.data == true) {
                    this.$message({
                        message: "添加成功",
                        type: "success",
                    });
                    this.$router.push("RelocationList");
                } else {
                    this.$message({
                        message: "添加失败",
                        type: "error",
                    });
                    return false;
                }
            })
        },
        //删除
        Del(Id) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                var data = {
                    id: Id,
                };
                DeleteProduct(data).then((res) => {
                    if (res.data.totalCount > 0) {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.GetProduct();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            });
        },
        handleSelection(val) {
            this.CheckList = val;
        },
        handleSelectionChange(val) {
            this.CheckList1 = val;
        },
        off() {
            this.dialogTableVisible = false;
            this.Relocation = this.CheckList1;
        },
        //选择产品
        Choose() {
            this.dialogTableVisible = true;
        },
        reset() {
            this.$router.push({ path: "RelocationList" });
        },
        //获取查询产品列表
        GetProductList() {
            var data = {
                ProductCode: this.dataProduct.ProductCode,
                ProductName: this.dataProduct.ProductName,
                pageIndex: this.dataProduct.pageIndex,
                pageSize: this.dataProduct.pageSize
            };
            GetProductList(data).then(res => {
                this.ProductList = res.data.data;
                this.dataProduct.pageCount = res.data.pageCount;
                this.dataProduct.totalCount = res.data.totalCount;
            });
        },
        //分页
        handleSizeChange(val) {
            this.dataProduct.pageSize = val;
            this.GetProductList();
        },
        handleCurrentChange(val) {
            this.dataProduct.pageIndex = val;
            this.GetProductList();
        },
    },
    mounted() {
        this.form.RelocationCode = autoGenerateCode('YK');
        this.GetProductList();
    },
}
</script>
<style></style>